import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import cass from 'classnames';
import _ from 'lodash';
import styles from './index.module.less';
import { renderEmpty } from '../commonRender';
import InfoStageTabInfo from '../../project/projectInfo/infoStageTabInfo';
import ProjectTask from '../../project/projectTask';
import ProjectMaterial from '../../project/projectMaterial';
import ProjectMember from '../../project/projectMember';

const tabs = [
    { labal: '信息', render: 'renderInfoItem' },
    { labal: '资料', render: 'renderMaterialItem' },
    { labal: '任务', render: 'renderTaskItem' },
    { labal: '团队', render: 'renderTeamItem' },
];

@inject(({
    chatState, taskState, projectState, userState, commonState
}) => ({
    chatState, taskState, projectState, projectActiveStageIndex: projectState.projectActiveStageIndex, userState, commonState
}))
@observer
class SideProjectInfo extends Component {
    state = {
        activeStageIndex: 0,
        activeIndex: 0
    }

    componentDidMount() {
        document.addEventListener('refleshSideProject', this.refleshListener);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ activeStageIndex: nextProps.projectActiveStageIndex });
    }

    componentWillUnmount() {
        document.removeEventListener('refleshSideProject', this.refleshListener);
    }

    refleshListener = (event) => {
        this.props.projectState.getDetail(event.detail, true);
    }

    tabChange = (stageid, i) => {
        this.setState({ activeStageIndex: i });
        const { getFields, getIdentity, detailData: { projecttype } } = this.props.projectState;
        getFields(stageid, projecttype);
        if (projecttype === 1 || projecttype === 2) getIdentity(stageid, projecttype);
    }


    isLawyer = (stage) => { // 律师协作团队成员
        if (!stage) return false;
        const { islawyermember, islawyermanager, islawyerhost } = stage;
        return islawyermember || islawyermanager || islawyerhost;
    }

    renderInfoItem(currentStage) {
        const { userState, projectState } = this.props
        const { detailData } = projectState;
        return (
            <div className={styles.wrapItem}>
                <InfoStageTabInfo
                    key={detailData.projectid}
                    col={1}
                    stage={currentStage}
                    create={false}
                    isLawyer={this.isLawyer(currentStage)}
                    detailData={detailData}
                    userState={userState}
                    projectState={projectState}
                    infoField={projectState.infoField}
                    identities={projectState.identities}
                />
            </div>
        )
    }

    renderMaterialItem(currentStage) {
        if (!currentStage) return null;
        const { activeStageIndex } = this.state;
        const { projectState } = this.props
        const { detailData = {} } = projectState;
        const { islawyerhost, islawyermanager } = detailData;
        const isBoss = islawyerhost || islawyermanager;
        return (
            <div className={styles.wrapItem}>
                <ProjectMaterial
                    col={1}
                    isShowInSlider
                    activeStageIndex={activeStageIndex}
                    data={currentStage}
                    create={false}
                    isBoss={isBoss}
                    isLawyer={this.isLawyer(currentStage)}
                    detailData={detailData}
                    projectState={projectState}
                />
            </div>
        )
    }

    goPage = (v) => {
        this.props.onActiveChange(true);
        // 右侧边栏显示
        const { projectState } = this.props;
        projectState.taskState.getDetailForSide({ taskid: v.taskid });
    }

    renderTaskItem(currentStage) {
        const { commonState, projectState } = this.props;
        return (
            <div className={styles.wrapItem}>
                <ProjectTask
                    col={1}
                    data={currentStage}
                    create={false}
                    goPage={this.goPage}
                    commonState={commonState}
                    projectState={projectState}
                />
            </div>
        )
    }

    renderTeamItem(currentStage) {
        const { userState, projectState } = this.props;
        return (
            <div className={styles.wrapItem}>
                <ProjectMember
                    isShowInSlider
                    data={currentStage}
                    create={false}
                    info={userState.info}
                    projectState={projectState}
                />
            </div>
        )
    }

    render() {
        // type 1: 在聊天页面侧边栏；2: 显现在项目页面侧边栏；3: 显现在任务页面侧边栏
        const { type } = this.props;
        const { detailData } = this.props.projectState;
        const { detailData: taskDetailData } = this.props.taskState;
        const { chatListCurrentItem } = this.props.chatState;
        let projectid;
        if (type === 1) { // 在聊天页面侧边栏
            projectid = _.get(chatListCurrentItem, 'projectid');
        } else if (type === 3) { // 在任务页面侧边栏
            projectid = _.get(taskDetailData, 'info.projectid');
        }

        // if (detailData) {
        //     console.log(JSON.parse(JSON.stringify(detailData)));
        // }
        if (!projectid && type === 1) return null;
        else if (!projectid && type === 3) return renderEmpty('无关联项目');;

        if (!detailData) return renderEmpty('暂无数据');

        const stages = _.get(detailData, 'stages', []) || [];
        const { activeStageIndex, activeIndex } = this.state;
        return (
            <div className={styles.info}>
                <div className={styles.header}>
                    <h3>{detailData.name}</h3>
                    <div className={styles.stage}>
                        项目阶段:
                    <div className={styles.wrap}>
                            {stages.length ? stages.map((v, i) => (
                                <div
                                    className={cass({ [styles.active]: activeStageIndex === i })}
                                    key={i}
                                    onClick={() => this.tabChange(v.stageid, i)}
                                >
                                    {v.iscomplete ? <span className="mdi mdi-checkbox-marked-circle" /> : null}
                                    {v.name}
                                </div>
                            )) : null}
                        </div>
                    </div>
                </div>
                <div className={styles.content}>
                    <div className={styles.tabs}>
                        {tabs.map((v, i) => (
                            <div
                                className={cass({ [styles.active]: activeIndex === i })}
                                key={v.render}
                                onClick={() => this.setState({ activeIndex: i })}
                            >{v.labal}</div>
                        ))}
                        <span className={styles[`active${activeIndex}`]} />
                    </div>
                    <div className={styles.wrap}>
                        {this[tabs[activeIndex].render](stages[activeStageIndex])}
                    </div>
                </div>
            </div>
        );
    }
}

export default SideProjectInfo